<template>
  <div class="app-container home">
    <el-row :gutter="10">
      <el-col :span="1.1">
        <el-button
          type="primary"
          size="mini"
          @click="caddApplicationId"
          v-hasRole="['apply']"
          class="new-button"
        >新增课程评估
        </el-button>
      </el-col>

    </el-row>
    <el-row :gutter="10">
      <el-col :lg="12" :xs="24" v-for="(item,i) in applicationList" class="card-row">
        <el-card>
          <div slot="header" class="clearfix">
            <el-row>
              <span class="card-header-span" :style="{color:(item.appliedStatus==99?'#fe6c6f':'#5e6d82')}"><i
                class="el-icon-notebook-2"></i>：{{ item.curriculumName }}</span>
              <span class="card-header-span" :style="{color:(item.appliedStatus==99?'#fe6c6f':'#5e6d82')}"><i
                class="el-icon-user"></i>：{{ item.appliedName }}</span>
            </el-row>
            <el-row class="card-title-two">
              <span class="card-header-span" :style="{color:(item.appliedStatus==99?'#fe6c6f':'#5e6d82')}">系：{{ item.departmentName }}</span>
              <span class="card-header-span" :style="{color:(item.appliedStatus==99?'#fe6c6f':'#5e6d82')}">专业：{{ item.professionName }}</span>
              <span class="card-header-span" :style="{color:(item.appliedStatus==99?'#fe6c6f':'#5e6d82')}">首次开设时间：{{ item.firstTime }}</span>
            </el-row>
          </div>
          <el-scrollbar>
            <div class="card-content">
              <el-row>
                <el-steps v-for="stepshead in  stepsheadlist" v-if="stepshead.appliedStatus==item.appliedStatus"
                          :active="stepshead.active" class="card-steps"
                          :finish-status="stepshead.status">

                  <el-step v-for="step in stepList" v-if="stepshead.appliedStatus!=99&&step.id<5"
                           :icon="step.icon">

                    <template v-if="stepshead.active>step.id" slot="title">
                      <div slot="reference">
                        {{ stepshead.active - 1 < step.id ? step.name2 : step.name1 }}
                      </div>
                    </template>

                    <template v-if="stepshead.active>step.id" slot="description">
                      <div slot="reference">
                        <span v-if="step.id===0">{{ item.createdAt }}</span>
                        <span v-if="step.id===1">{{ item.submittedAt }}</span>
                        <span v-if="step.id===2">{{ item.auditedAt }}</span>
                        <span v-if="step.id===3">{{ item.allocatedAt }}</span>
                        <span v-if="step.id===4">{{ item.finishedAt }}</span>
                        <span v-if="step.id===1"><br/>自评得分:{{ getScore(item) }}</span>
                        <span v-if="step.id===3"><br/>院内:{{ item.inExpert }}</span>
                        <span v-if="step.id===3"><br/>院外:{{ item.outExpert }}</span>
                      </div>
                    </template>

                    <template v-if="stepshead.active<=step.id" slot="title">
                      <div slot="reference">
                        {{ stepshead.active - 1 < step.id ? step.name2 : step.name1 }}
                      </div>
                    </template>

                    <template v-if="stepshead.active<=step.id" slot="description">
                      <div slot="reference">
                        <span v-if="step.id===4 && item.inExpertFinished!==null">院内:{{ item.inExpertFinished }}</span>
                        <span v-if="step.id===4 && item.outExpertFinished!==null"><br/>院外:{{ item.outExpertFinished }}</span>
                        <span v-if="step.id===4 && item.outExpertFinished!==null"><br/>问卷:{{ item.answersCount }}</span>
                        <!--                        <span v-if="step.id===4"><br/>问卷:{{ item.inExpert }}</span>-->
                      </div>
                    </template>

                  </el-step>

                  <el-step v-for="step in stepList" v-if="stepshead.appliedStatus==99&&step.id!=4"
                           :title="stepshead.appliedStatus==99?step.name2:step.name1"
                           :icon="step.icon"></el-step>
                </el-steps>

              </el-row>
            </div>
            <el-row>
              <el-button v-if="haveCancel(item)" type="danger" size="small" class="card-button"
                         v-hasRole="['apply']"
                         @click="cancellationApplication(item)">作废
              </el-button>
              <el-button v-if="item.appliedStatus==99" type="danger" size="small" class="card-button"
                         v-hasRole="['apply']"
                         @click="restartEvaluation(item)">重开项目
              </el-button>
              <el-button v-if="item.appliedStatus>30" type="primary" size="small" class="card-button"
                         v-hasRole="['student']"
                         @click="gotoQuestionnaire(item)">填写问卷
              </el-button>
              <el-button v-if="item.appliedStatus>30" type="primary" size="small" class="card-button"
                         v-hasRole="['audit']"
                         @click="gotoQnrPaper(item)">调查问卷
              </el-button>
              <el-button v-if="haveExpert(item)" type="primary" size="small" class="card-button"
                         v-hasRole="['expert']"
                         @click="expertApplication(item)">专家评分
              </el-button>
              <el-button v-if="item.appliedStatus==40" type="primary" size="small" class="card-button"
                         v-hasRole="['audit']"
                         @click="handleUpdate(item)">重新分配专家
              </el-button>
              <el-button v-for="button in buttonlist" v-if="button.id==item.appliedStatus" v-hasRole="button.has"
                         type="primary" size="small" class="card-button" @click="goTo(item)">
                {{ button.name }}
              </el-button>
              <el-button v-if="haveSubmit(item)" type="primary" size="small" class="card-button"
                         v-hasRole="['apply']"
                         @click="submitApplication(item)">修改 / 提交
              </el-button>
              <el-button type="primary" size="small" class="card-button"
                         v-hasRole="['admin', 'manager', 'apply', 'audit', 'expert']"
                         @click="gotoApplyView(item)">查看评估
              </el-button>
              <el-button v-if="item.appliedStatus==50" type="primary" size="small" class="card-button"
                         v-hasRole="['admin', 'manager', 'apply', 'audit', 'expert']"
                         @click="gotoapplicationAnswers(item)">查看结果
              </el-button>
            </el-row>
          </el-scrollbar>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="院内专家">
              <el-select v-model="form.expertBysIn" multiple placeholder="请选择专家" style="width: 100%">
                <el-option
                  v-for="expert in expertOptions"
                  :key="expert.userId"
                  :label="expert.nickName"
                  :value="expert.userId"
                  :disabled="expert.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="院外专家">
              <el-select v-model="form.expertBysOut" multiple placeholder="请选择专家" style="width: 100%">
                <el-option
                  v-for="expert in expertOptionsOut"
                  :key="expert.userId"
                  :label="expert.nickName"
                  :value="expert.userId"
                  :disabled="expert.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitForm">分配完成</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  cancellationChangeState, restartEvaluation, ApplicationListAndHover
} from "@/api/business/evaluationApplication";
import {
  getEvaluation, updateExpert
} from "@/api/business/expert";
import math from "@/api/tool/moth";

export default {

  name: "Index",
  props: {},
  data() {
    return {
      visible: false,
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      form: {evaluationApplicationId: 0, expertBysIn: [], expertBysOut: []},
      roleOptions: [],
      open: false,
      evaluatEquery: {},
      selfRadio: 2,
      expertRadio: 1,
      active: "0",
      liWidth: 496,//整个li的宽度，要和下面的li样式统一
      liHalf: 248,//这里是li一半的宽度，使中间横线上的点可以找到准确的位置
      applicationList: [],
      expertOptions: [],
      expertOptionsOut: [],
      expertBys: [],
      rules: {},
      title: undefined,
      buttonlist: [
        // {id: 10, name: '修改 / 提交', type: 'danger', has: 'apply'},
        {id: 20, name: '审核', type: 'danger', has: ['audit']},
        {id: 30, name: '分配专家', type: 'danger', has: ['audit']},
        // {id: 40, name: '专家评分', type: 'danger', has: ['expert']},
        // {id: 50, name: '查看', type: 'danger', has: 'apply'}
      ],
      liList: [
        {id: 0, name: '时间', stepid: -1},
        {id: 1, name: '人', stepid: -1},
        {id: 2, name: '自评总分：', stepid: 1},
        {id: 3, name: '分配专家：', stepid: 3},
        {id: 4, name: '未完成专家：', stepid: 4}

      ],
      stepsheadlist: [
        {appliedStatus: 10, status: 'finish', active: 1},
        {appliedStatus: 20, status: 'finish', active: 2},
        {appliedStatus: 30, status: 'finish', active: 3},
        {appliedStatus: 40, status: 'finish', active: 4},
        {appliedStatus: 50, status: 'finish', active: 5},
        {appliedStatus: 99, status: 'wait', active: 5}
      ],
      stepList: [
        {id: 0, name1: '评估保存', name2: '待保存', icon: 'el-icon-edit', contentType: '保存', contentName: ''},
        {id: 1, name1: '自评提交', name2: '待自评', icon: 'el-icon-upload2', contentType: '提交', contentName: ''},
        {id: 2, name1: '评估审核', name2: '待审核', icon: 'el-icon-document-checked', contentType: '审核', contentName: ''},
        {id: 3, name1: '专家分配', name2: '待分配', icon: 'el-icon-position', contentType: '分配', contentName: '分配专家：'},
        {id: 4, name1: '评估完成', name2: '待完成', icon: 'el-icon-success', contentType: '完成评估', contentName: '未完成专家：'},
        {id: 5, name1: '作废', name2: '作废', icon: 'el-icon-warning-outline', contentType: '作废', contentName: ''}
      ]


    };
  },
  created() {
    this.getEvaluateList();
  },
  activated() {
    if (this.$route.query.refresh) {
      this.getEvaluateList();

    }
  },
  methods: {
    getScore(item) {
      return math.add(item.selfScore, 0).toFixed(2)
    },
    haveSubmit(item) {
      if (item.appliedStatus === 10 && item.appliedBy === this.$store.state.user.id) {
        return true
      } else {
        return false
      }
    },
    haveCancel(item) {
      if (item.appliedStatus < 30 && item.appliedBy === this.$store.state.user.id) {
        return true
      } else {
        return false
      }
    },
    haveExpert(item) {
      if (item.appliedStatus === 40 && item.expertList.some(ele => ele.expertBy === this.$store.state.user.id)) {
        return true
      } else {
        return false
      }
    },
    goTo(item) {
      console.log(item.appliedStatus);

      if (item.appliedStatus == 10) {
        const evaluationApplicationId = item.evaluationApplicationId;
        this.$router.push("/evaluation/application/index/" + evaluationApplicationId);
      } else if (item.appliedStatus == 20) {
        const evaluationApplicationId = item.evaluationApplicationId;
        this.$router.push("/evaluation/application/index/" + evaluationApplicationId);
      } else if (item.appliedStatus == 30) {
        this.handleUpdate(item);
      } else if (item.appliedStatus == 40) {
        const evaluationApplicationId = item.evaluationApplicationId;
        this.$router.push("/evaluation/expert/score/" + evaluationApplicationId);
      }

    },
    gotoQnrPaper(item) {
      this.$router.push("/qnr/paper/index/" + item.evaluationApplicationId);
    },
    gotoQuestionnaire(item) {
      const evaluationApplicationId = item.evaluationApplicationId;
      this.$router.push({path:'/qur/questionnairePC/index',query: {'showType':0,'applicationId':evaluationApplicationId}})
    },
    gotoApplyView(item) {
      const evaluationApplicationId = item.evaluationApplicationId;
      this.$router.push("/evaluation/result/view/" + evaluationApplicationId);
    },
    gotoapplicationAnswers(item) {
      const evaluationApplicationId = item.evaluationApplicationId;
      this.$router.push("/qur/applicationAnswers/index/" + evaluationApplicationId);
    },
    submitApplication(item) {
      const evaluationApplicationId = item.evaluationApplicationId;
      this.$router.push("/evaluation/application/index/" + evaluationApplicationId);
    },
    expertApplication(item) {
      const evaluationApplicationId = item.evaluationApplicationId;
      this.$router.push("/evaluation/expert/score/" + evaluationApplicationId);
    },
    cancellationApplication(item) {
      this.$modal.confirm('是否确认作废课程"' + item.curriculum + '"？').then(function () {
        let date = {
          evaluationApplicationId: "",
          appliedStatus: undefined
        }
        date.evaluationApplicationId = item.evaluationApplicationId
        return cancellationChangeState(date);
      }).then(() => {
        console.log("作废")
        this.$modal.msgSuccess("作废成功");
        this.getEvaluateList();
      }).catch(() => {

      });
    },
    restartEvaluation(item) {
      this.$modal.confirm('是否确认重启课程"' + item.curriculum + '"？').then(function () {
        const date = {
          evaluationApplicationId: ""
        }
        date.evaluationApplicationId = item.evaluationApplicationId
        return restartEvaluation(date)
      }).then(() => {
        this.$modal.msgSuccess("重开成功");
        this.getEvaluateList();
      }).catch(() => {

      });
    },

    caddApplicationId() {
      this.$router.push("/evaluation/application/index/0");
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    reset() {
      this.form = {
        evaluationApplicationId: undefined, expertBys: []
      };
      this.resetForm("form");
    },
    handleUpdate(item) {
      console.log("分配专家");
      this.reset();
      this.open = true;
      this.title = "分配专家";

      this.getTreeselect(item);
    },
    getTreeselect(item) {
      const evaluationIndicatorId = item.evaluationApplicationId;
      getEvaluation(evaluationIndicatorId).then(response => {
        this.form.evaluationApplicationId = item.evaluationApplicationId;
        console.log(response);
        this.form.expertBysIn = response.checkedKeys.Experts;
        this.form.expertBysOut = response.checkedKeys.ExpertOuts;

        this.expertOptions = response.userDatas.filter(item => item.deptId == 104);
        this.expertOptionsOut = response.userDatas.filter(item => item.deptId == 105);
        console.log(1)
        console.log(this.expertOptions)
        console.log(2)
        console.log(this.expertOptionsOut)
        console.log(response.userDatas);
      });
    },
    submitForm: function () {
      console.log(this.form);
      updateExpert(this.form).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getEvaluateList();
      });

    },
    cancel() {
      this.open = false;
      this.reset();
    },

    getEvaluateList() {
      const data = {evaluationApplicationId: null};
      ApplicationListAndHover(data).then(response => {
        console.log(response);
        this.applicationList = response.data;
        //this.applicationList = response.data.sort(this.compare("appliedStatus"));

        console.log(this.applicationList);
        this.loading = false;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      }
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-card__header {
  padding: 10px 15px;
  min-height: 40px;
  background-color: #ecf8ff;
  font-size: 18px;
  font-weight: 600;
}

::v-deep .el-card__body {
  padding: 16px 20px;
}

.home {
  padding: 20px 20px 0 20px !important;
  font-size: 14px;
  color: #676a6c;
  overflow-x: hidden;

  .new-button {
    margin-bottom: 8px;
  }

  .card-row {
    margin-bottom: 15px;
  }

  .card-header-span {
    margin-left: 15px;
  }

  .card-title-two {
    margin-top: 5px;
    font-size: 15px
  }

  .card-content {
    height: 120px;
  }

  .card-button {
    float: right;
    margin-left: 5px;
  }
}

.iconfont {
  font-size: 18px;
}

</style>

